<template>
  <div v-if="data._isInit">
    <el-collapse-item :title="$t('基础配置')" name="1">
      <el-form-item :label="$t('标题')">
        <el-input v-model="config.title"></el-input>
      </el-form-item>
      <el-form-item :label="$t('横向')">
        <el-switch v-model="echarts.isX" />
      </el-form-item>
      <el-form-item v-if="config.dataList.length > 1" :label="$t('条件颜色')">
        <l-input-color v-model="config.qNameColor" />
      </el-form-item>
      <el-form-item v-if="config.dataList.length > 1" :label="$t('条件选中')">
        <l-input-color v-model="config.qNameActiveColor" />
      </el-form-item>
      <el-form-item :label="$t('显示统计')">
        <el-switch v-model="config.isSummary" />
      </el-form-item>
      <template>
        <el-form-item :label="$t('统计单位')">
          <el-input v-model="config.summaryUnit"></el-input>
        </el-form-item>
        <el-form-item :label="$t('统计标题')">
          <el-input v-model="config.summaryLabel"></el-input>
        </el-form-item>
      </template>
    </el-collapse-item>
    <el-collapse-item :title="$t('数据配置')" name="2">
      <div style="padding: 10px 0" v-if="config.dataList">
        <div
          class="learun-row-form-input"
          :key="index"
          v-for="(item, index) in config.dataList"
        >
          <el-form-item
            label-width="40px"
            v-if="config.dataList.length > 1"
            :label="$t('名称')"
            style="margin-bottom: 8px"
          >
            <el-input v-model="item.name" />
          </el-form-item>
          <el-form-item
            label-width="40px"
            :label="$t('视图')"
            style="margin-bottom: 8px"
          >
            <l-dbsource-select
              v-model="item.dataCode"
              @change="handleDataSourceChange($event, item)"
              @init="handleDataSourceInit"
            />
          </el-form-item>
          <el-form-item label-width="40px" :label="$t('维度')">
            <l-select
              v-model="item.labelKey"
              :options="myfieldOptions(item.dataCode)"
            />
          </el-form-item>
          <el-form-item
            v-for="(valueKey, kindex) in item.valueKeys || []"
            :key="kindex"
            label-width="0"
            style="margin-bottom: 8px"
          >
            <div class="flex l-rblock echarts-select">
              <div class="echarts-type" @click="changeChartType(valueKey)">
                <i :class="[getEchartsType(valueKey.t)]" />
              </div>
              <el-input :placeholder="$t('名称')" v-model="valueKey.n"> </el-input>
              <l-select
                v-model="valueKey.k"
                :placeholder="$t('指标')"
                :options="myfieldOptions(item.dataCode)"
              />
              <l-input-color v-model="valueKey.c" :notInput="true" />
              <el-popover
                placement="bottom-start"
                :title="$t('高级设置')"
                width="400"
                trigger="click"
                popper-class="learun-echarts-setting-popper"
              >
                <template #reference>
                  <div class="echarts-setting">
                    <i class="el-icon-setting" />
                  </div>
                </template>
                <el-form label-width="72px" label-position="left" size="mini">
                  <template v-if="['bar', 'pictorialBar'].includes(valueKey.t)">
                    <el-form-item :label="$t('渐变底色')">
                      <l-input-color v-model="valueKey.c2" />
                    </el-form-item>
                    <el-form-item :label="$t('高亮')">
                      <el-switch v-model="valueKey.e" />
                    </el-form-item>
                    <el-form-item :label="$t('高亮颜色')">
                      <l-input-color v-model="valueKey.ec1" />
                    </el-form-item>
                    <el-form-item :label="$t('高亮渐变')">
                      <l-input-color v-model="valueKey.ec2" />
                    </el-form-item>
                  </template>
                  <template v-if="['line'].includes(valueKey.t)">
                    <el-form-item :label="$t('面积图')">
                      <el-switch v-model="valueKey.isA" />
                    </el-form-item>
                    <el-form-item v-if="valueKey.isA" :label="$t('渐变开始')">
                      <l-input-color v-model="valueKey.ac1" />
                    </el-form-item>
                    <el-form-item v-if="valueKey.isA" :label="$t('渐变结束')">
                      <l-input-color v-model="valueKey.ac2" />
                    </el-form-item>
                  </template>
                  <el-form-item :label="$t('绑定Y轴')">
                    <l-select v-model="valueKey.y" :options="yOptions" />
                  </el-form-item>
                </el-form>
              </el-popover>
              <!--<l-input-color v-if="['bar','pictorialBar'].includes(valueKey.t)" v-model="valueKey.c2" :notInput="true" />-->
              <div
                v-if="item.valueKeys.length > 1"
                @click="handleRemoveValueKey(item, kindex)"
                class="delete-btn"
              >
                <i class="learun-icon-delete" />
              </div>
            </div>
          </el-form-item>
          <div style="text-align: right; width: 100%">
            <el-button
              type="success"
              size="mini"
              @click="handleAddValueKey(item)"
              >{{ $t("添加指标") }}</el-button
            >
          </div>
          <el-button
            :title="$t('删除')"
            v-if="config.dataList.length > 1"
            @click="handleRemoveDataList(index)"
            class="learun-row-form-input-delete"
            circle
            plain
            size="mini"
            type="danger"
          >
            <i class="el-icon-close"></i>
          </el-button>
        </div>
      </div>
      <div style="margin-bottom: 10px">
        <el-button type="primary" size="mini" @click="handleAddDataList">{{
          $t("添加")
        }}</el-button>
      </div>
    </el-collapse-item>
    <el-collapse-item :title="$t(`${config.isX ? 'X' : 'Y'}轴配置`)" name="3">
      <div style="padding: 10px 0" v-if="echarts.yAxis">
        <div
          class="learun-row-form-input"
          :key="index"
          v-for="(item, index) in echarts.yAxis"
        >
          <el-form-item :label="$t('名称')" style="margin-bottom: 8px">
            <el-input v-model="item.name" />
          </el-form-item>
          <el-form-item :label="$t('名称位置')" style="margin-bottom: 8px">
            <l-select
              :clearable="false"
              :options="yNameLocationOptions"
              v-model="item.nameLocation"
            />
          </el-form-item>
          <el-form-item :label="$t('名称颜色')" style="margin-bottom: 8px">
            <l-input-color v-model="item.nameTextStyle.color" />
          </el-form-item>
          <el-form-item :label="$t('名称大小')" style="margin-bottom: 8px">
            <el-input-number
              v-model="item.nameTextStyle.fontSize"
              :max="24"
              :min="12"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('名称粗细')">
            <l-select
              :clearable="false"
              :options="labelFontWeightOptions"
              v-model="item.nameTextStyle.fontWeight"
            />
          </el-form-item>

          <el-form-item :label="$t('最小值')" style="margin-bottom: 8px">
            <el-input-number
              v-model="item.min"
              :max="item.max"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('最大值')" style="margin-bottom: 8px">
            <el-input-number
              v-model="item.max"
              :min="item.min"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('分割间隔')">
            <el-input-number
              v-model="item.interval"
              :min="0"
              controls-position="right"
            ></el-input-number>
          </el-form-item>

          <el-form-item :label="$t('轴位置')">
            <l-select
              :options="[
                { value: 0, label: config.isX ? '下' : '左' },
                { value: 1, label: config.isX ? '上' : '右' },
              ]"
              v-model="item.position"
            />
          </el-form-item>
          <el-form-item :label="$t('数值类型')" style="margin-bottom: 8px">
            <l-select v-model="item.type" :options="axisTypeOptions" />
          </el-form-item>
          <el-form-item :label="$t('数值格式')">
            <el-input class="l-input-icon" v-model="item.axisLabel.formatter">
              <template slot="append">
                <el-popover
                  placement="top-start"
                  :title="$t('参数说明')"
                  width="400"
                  trigger="hover"
                >
                  <p>
                    <span style="color: #ff0033">{value}</span>：{{ $t('值名，比方') }}<span
                      style="color: #ff0033"
                      >{value} kg</span
                    >
                  </p>
                  <p>
                    {{ $t('对于时间轴,支持多种形式') }}：<a
                      href="https://echarts.apache.org/zh/option.html#yAxis.axisLabel.formatter"
                      > {{ $t('查看官网') }}</a
                    >
                  </p>

                  <el-button
                    slot="reference"
                    icon="learun-icon-circle-question"
                  />
                </el-popover>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('数值颜色')">
            <l-input-color v-model="item.axisLabel.color" />
          </el-form-item>
          <el-form-item :label="$t('线条显示')">
            <el-switch v-model="item.axisLine.show" />
          </el-form-item>
          <el-form-item v-if="item.axisLine.show" :label="$t('线条颜色')">
            <l-input-color v-model="item.axisLine.lineStyle.color" />
          </el-form-item>

          <el-button
            :title="$t('删除')"
            v-if="echarts.yAxis.length > 1"
            @click="handleRemoveYList(index)"
            class="learun-row-form-input-delete"
            circle
            plain
            size="mini"
            type="danger"
          >
            <i class="el-icon-close"></i>
          </el-button>
        </div>
      </div>
      <div style="margin-bottom: 10px">
        <el-button type="primary" size="mini" @click="handleAddYList">{{
          $t("添加")
        }}</el-button>
      </div>
    </el-collapse-item>
    <el-collapse-item :title="$t(`${config.isX ? 'Y' : 'X'}轴配置`)" name="4">
      <el-form-item :label="$t('轴位置')">
        <l-select
          :options="[
            { value: 0, label: config.isX ? '左' : '下' },
            { value: 1, label: config.isX ? '右' : '上' },
          ]"
          v-model="xAxis.position"
        />
      </el-form-item>
      <el-form-item :label="$t('名称')">
        <el-input v-model="xAxis.name" />
      </el-form-item>
      <el-form-item :label="$t('名称位置')">
        <l-select
          :clearable="false"
          :options="yNameLocationOptions"
          v-model="xAxis.nameLocation"
        />
      </el-form-item>
      <el-form-item :label="$t('名称颜色')" style="margin-bottom: 8px">
        <l-input-color v-model="xAxis.nameTextStyle.color" />
      </el-form-item>
      <el-form-item :label="$t('名称大小')" style="margin-bottom: 8px">
        <el-input-number
          v-model="xAxis.nameTextStyle.fontSize"
          :max="24"
          :min="12"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item :label="$t('名称粗细')">
        <l-select
          :clearable="false"
          :options="labelFontWeightOptions"
          v-model="xAxis.nameTextStyle.fontWeight"
        />
      </el-form-item>
      <el-form-item :label="$t('类型')">
        <l-select v-model="xAxis.type" :options="axisTypeOptions" />
      </el-form-item>
      <el-form-item :label="$t('格式')">
        <el-input class="l-input-icon" v-model="xAxis.axisLabel.formatter">
          <template slot="append">
            <el-popover
              placement="top-start"
              :title="$t('参数说明')"
              width="400"
              trigger="hover"
            >
              <p>
                <span style="color: #ff0033">{value}</span>：{{ $t('值名，比方') }}<span
                  style="color: #ff0033"
                  >{value} kg</span
                >
              </p>
              <p>
                {{ $t('对于时间轴,支持多种形式') }}：<a
                  href="https://echarts.apache.org/zh/option.html#yAxis.axisLabel.formatter"
                  >{{ $t('查看官网') }}</a
                >
              </p>

              <el-button slot="reference" icon="learun-icon-circle-question" />
            </el-popover>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('颜色')">
        <l-input-color v-model="xAxis.axisLabel.color" />
      </el-form-item>
      <el-form-item :label="$t('线条显示')">
        <el-switch v-model="xAxis.axisLine.show" />
      </el-form-item>
      <el-form-item v-if="xAxis.axisLine.show" :label="$t('线条颜色')">
        <l-input-color v-model="xAxis.axisLine.lineStyle.color" />
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item :title="$t('柱状图')" name="5">
      <el-form-item :label="$t('柱条宽度')">
        <el-input-number
          v-model="bar.barWidth"
          :min="0"
          controls-position="right"
        ></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('是否堆叠')">
        <el-switch v-model="bar.isStack" />
      </el-form-item>
      <el-form-item :label="$t('显示文本')">
        <el-switch v-model="bar.label.show" />
      </el-form-item>
      <el-form-item v-if="bar.label.show" :label="$t('文本颜色')">
        <l-input-color v-model="bar.label.color" />
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item :title="$t('折线图')" name="6">
      <el-form-item :label="$t('平滑')">
        <el-switch v-model="line.smooth" />
      </el-form-item>
      <el-form-item :label="$t('显示标记')">
        <el-switch v-model="line.showSymbol" />
      </el-form-item>
      <el-form-item :label="$t('面积图')">
        <el-switch v-model="line.isArea" />
      </el-form-item>
      <el-form-item v-if="line.isArea" :label="$t('渐变开始')">
        <l-input-color v-model="line.areaColorStart" />
      </el-form-item>
      <el-form-item v-if="line.isArea" :label="$t('渐变结束')">
        <l-input-color v-model="line.areaColorEnd" />
      </el-form-item>
      <el-form-item :label="$t('是否堆叠')">
        <el-switch v-model="line.isStack" />
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item :title="$t('尖峰图')" name="15">
      <el-form-item :label="$t('柱条宽度')">
        <el-input-number
          v-model="pictorialBar.barWidth"
          :min="0"
          controls-position="right"
        ></el-input-number>
      </el-form-item>
    </el-collapse-item>

    <el-collapse-item :title="$t('文本标签')" name="7">
      <el-form-item :label="$t('是否显示')">
        <el-switch v-model="label.show" />
      </el-form-item>
      <template v-if="label.show">
        <el-form-item :label="$t('文本颜色')">
          <l-input-color v-model="label.color" />
        </el-form-item>
        <el-form-item :label="$t('文本位置')">
          <l-select
            :clearable="false"
            :options="labelPositionOptions2"
            v-model="label.position"
          />
        </el-form-item>
        <el-form-item :label="$t('文本粗细')">
          <l-select
            :clearable="false"
            :options="labelFontWeightOptions"
            v-model="label.fontWeight"
          />
        </el-form-item>

        <el-form-item :label="$t('字体大小')">
          <el-input-number
            v-model="label.fontSize"
            :max="24"
            :min="12"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('格式方式')">
          <l-select
            :clearable="false"
            :options="labelFormatterTypeOptions"
            v-model="label.formatterType"
          />
        </el-form-item>
        <el-form-item v-if="label.formatterType == 'fn'" :label="$t('格式脚本')">
          <el-button
            type="primary"
            size="mini"
            @click="handleAddCode('labelFormatter')"
            >{{ $t("设置") }}</el-button
          >
        </el-form-item>
        <el-form-item v-else :label="$t('格式文本')">
          <el-input class="l-input-icon" v-model="label.formatter">
            <template slot="append">
              <el-popover
                placement="top-start"
                :title="$t('参数说明')"
                width="400"
                trigger="hover"
              >
                <p><span style="color: #ff0033">{a}</span>：{{ $t('系列名') }}。</p>
                <p><span style="color: #ff0033">{b}</span>：{{ $t('数据名') }}。</p>
                <p><span style="color: #ff0033">{c}</span>：{{ $t('数据值') }}。</p>
                <p><span style="color: #ff0033">{d}</span>：{{ $t('百分比') }}。</p>
                <p><span style="color: #ff0033">{e}</span>：{{ $t('换行') }}。</p>
                <p>
                  <span style="color: #ff0033">{@xxx}</span>：{{ $t('数据中名为') }}
                  <span style="color: #ff0033">'xxx'</span> {{ $t('的维度的值，如') }}
                  <span style="color: #ff0033">{@product}</span> {{ $t('表示名为') }}<span
                    style="color: #ff0033"
                    >'product'</span
                  >
                  {{ $t('的维度的值') }}。
                </p>
                <p>
                  <span style="color: #ff0033">{@[n]}</span>：{{ $t('数据中维度') }}
                  <span style="color: #ff0033">n</span> {{ $t('的值，如') }}
                  <span style="color: #ff0033">{@[3]}</span>{{ $t('表示维度 3 的值，从') }}
                  {{ $t('0 开始计数') }}。
                </p>
                <el-button
                  slot="reference"
                  icon="learun-icon-circle-question"
                />
              </el-popover>
            </template>
          </el-input>
        </el-form-item>
      </template>
    </el-collapse-item>
    <el-collapse-item :title="$t('图例设置')" name="8">
      <el-form-item :label="$t('是否显示')">
        <el-switch v-model="legend.show" />
      </el-form-item>
      <template v-if="legend.show">
        <el-form-item :label="$t('布局朝向')">
          <l-select
            :clearable="false"
            :options="legendOrientOptions"
            v-model="legend.orient"
          />
        </el-form-item>
        <el-form-item :label="$t('所在位置')">
          <l-select
            :clearable="false"
            :options="legendPositionOptions"
            v-model="legend.position"
          />
        </el-form-item>
        <el-form-item :label="$t('边距大小')">
          <el-input-number
            :min="0"
            controls-position="right"
            v-model="legend.padding"
          />
        </el-form-item>
        <el-form-item :label="$t('宽度自动')">
          <el-switch v-model="legend.widthAuto" />
        </el-form-item>
        <el-form-item v-if="!legend.widthAuto" :label="$t('宽度')">
          <el-input-number
            v-model="legend.width"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('标记宽度')">
          <el-input-number
            v-model="legend.itemWidth"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('标记高度')">
          <el-input-number
            v-model="legend.itemHeight"
            :min="0"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item :label="$t('标记形状')">
          <l-select v-model="legend.itemIcon" :options="iconOptions" />
        </el-form-item>
        <el-form-item :label="$t('文本颜色')">
          <l-input-color v-model="legend.textStyle.color" />
        </el-form-item>
      </template>
    </el-collapse-item>
    <el-collapse-item :title="$t('指示器')" name="9">
      <el-form-item :label="$t('触发')">
        <l-select
          :clearable="false"
          :options="toolTipTriggerOptions"
          v-model="echarts.tooltip.trigger"
        />
      </el-form-item>
      <el-form-item :label="$t('类型')">
        <l-select
          :clearable="false"
          :options="toolTipTypeOptions"
          v-model="echarts.tooltip.axisPointer.type"
        />
      </el-form-item>
      <el-form-item
        v-if="echarts.tooltip.axisPointer.type == 'shadow'"
        :label="$t('阴影颜色')"
      >
        <l-input-color
          v-model="echarts.tooltip.axisPointer.shadowStyle.color"
        />
      </el-form-item>
      <el-form-item v-else :label="$t('线条颜色')">
        <l-input-color v-model="echarts.tooltip.axisPointer.lineStyle.color" />
      </el-form-item>
    </el-collapse-item>
    <el-collapse-item :title="$t('网格设置')" name="11">
      <el-form-item :label="$t('包含坐标')">
        <el-switch v-model="grid.containLabel" />
      </el-form-item>
      <el-form-item :label="$t('左边距')">
        <el-slider v-model="grid.left" />
      </el-form-item>
      <el-form-item :label="$t('右边距')">
        <el-slider v-model="grid.right" />
      </el-form-item>
      <el-form-item :label="$t('上边距')">
        <el-input-number
          v-model="grid.top"
          :min="0"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item :label="$t('下边距')">
        <el-input-number
          v-model="grid.bottom"
          :min="0"
          controls-position="right"
        />
      </el-form-item>
    </el-collapse-item>
  </div>
</template>
<script>
import configMixins from "../mixins/config";
export default {
  mixins: [configMixins()],
  data() {
    return {
      yAxisSetting: {
        name: "", // 名称
        type: "value", // 类型
        position: null, // 位置

        nameLocation: "end", // 名称位置
        nameTextStyle: {
          color: "", // 名称颜色
          fontWeight: "normal", // 名称字体粗线
          fontSize: 12, // 名称字体大小
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "",
          },
        },
        axisLabel: {
          formatter: "",
          color: "",
        },
        min: undefined,
        max: undefined,
        interval: null,
      },
    };
  },
  computed: {
    bar() {
      return this.series.bar;
    },
    line() {
      return this.series.line;
    },
    pictorialBar() {
      return this.series.pictorialBar;
    },
    xAxis() {
      return this.echarts.xAxis;
    },
    grid() {
      return this.echarts.grid;
    },
    yOptions() {
      const res = [];
      this.echarts.yAxis.forEach((item, index) => {
        res.push({
          value: index,
          label: `${this.config.isX ? "X" : "Y"}轴${index + 1}`,
        });
      });
      return res;
    },
  },
  created() {
    if (!this.data._isInit) {
      return;
    }
    if (!this.bar.label) {
      this.$set(this.bar, "label", {
        show: false,
        color: "",
      });
    }

    if (!this.xAxis.nameTextStyle) {
      this.$set(this.xAxis, "nameTextStyle", {
        color: "", // 名称颜色
        fontWeight: "normal", // 名称字体粗线
        fontSize: 12, // 名称字体大小
      });
    }

    if (!this.echarts.grid) {
      this.$set(this.echarts, "grid", {
        left: 10,
        top: 60,
        right: 10,
        bottom: 60,
        containLabel: false,
      });
    }

    console.log(this.series.pictorialBar, "this.series.pictorialBar");
    if (!this.series.pictorialBar) {
      this.$set(this.series, "pictorialBar", {
        barWidth: null,
      });
    }
  },
  methods: {
    init(data) {
      const config = {
        echarts: {
          isX: false,
          legend: {
            show: true,
            orient: "horizontal",
            position: "bottomCenter",
            widthAuto: true,
            width: 200,
            itemWidth: 25,
            itemHeight: 14,
            itemIcon: "",
            textStyle: {
              color: "",
            },
            padding:8,
          },
          tooltip: {
            trigger: "",
            axisPointer: {
              type: "",
              shadowStyle: {
                color: "",
              },
              lineStyle: {
                color: "",
              },
            },
          },
          grid: {
            left: 10,
            top: 60,
            right: 10,
            bottom: 60,
            containLabel: false,
          },

          series: {
            itemStyle: {},
            label: {
              show: false,
              color: "",
              position: "top",
              fontWeight: "",
              formatterType: "label", //label  文本 fn 方法
              formatter: "",
            },
            bar: {
              barWidth: null,
              isStack: false,

              label: {
                show: false,
                color: "",
              },
            },
            line: {
              smooth: false, // 平滑
              showSymbol: true, // 显示标记
              isArea: false, // 面积图
              areaColorStart: "", // 渐变颜色开始
              areaColorEnd: "", // 渐变颜色结束
              isStack: false,
            },
            pictorialBar: {
              barWidth: null,
            },
          },
          yAxis: [],
          xAxis: {
            type: "",
            position: 0,
            axisLine: {
              show: true,
              lineStyle: {
                color: "",
              },
            },
            axisLabel: {
              formatter: "",
              color: "",
            },

            name: "",
            nameLocation: "end", // 名称位置
            nameTextStyle: {
              color: "", // 名称颜色
              fontWeight: "normal", // 名称字体粗线
              fontSize: 12, // 名称字体大小
            },
          },
        },
        // 数据配置
        qNameColor: "", // 在多数据视图的情况下，切换栏颜色
        qNameActiveColor: "", // 切换栏选中颜色
        dataList: [
          {
            name: "",
            dataCode: "",
            labelKey: "",
            valueKeys: [
              { n: "", k: "", y: 0, c: "", c2: "", t: "bar", e: false },
            ], //n 名称 k字段，y轴，c颜色,t:类型 line 或 bar
          },
        ],

        isSummary: false,
        summaryUnit: "",
        summaryLabel: "",
      };

      config.echarts.yAxis.push(this.$deepClone(this.yAxisSetting));

      this.commonInit(data, config);
    },
    // 数据集设置
    myfieldOptions(code) {
      return this.fieldMapOptions[code] || [];
    },
    handleAddDataList() {
      const dataList = this.config.dataList || [];
      if (dataList.length > 0) {
        dataList.push(this.$deepClone(dataList[0]));
      } else {
        dataList.push({
          name: "",
          dataCode: "",
          labelKey: "",
          valueKeys: [
            { n: "", k: "", y: 0, c: "", c2: "", t: "bar", e: false },
          ],
        }); //n 名称 k字段，y轴，c颜色,t:类型 line 或 bar
      }

      this.$set(this.config, "dataList", dataList);
    },
    handleRemoveDataList(index) {
      this.config.dataList.splice(index, 1);
    },
    handleAddValueKey(item) {
      const valueKeys = item.valueKeys || [];
      valueKeys.push({ n: "", k: "", y: "", c: "", t: "bar" }); //n 名称 k字段，y轴，c颜色,t:类型 line 或 bar
      this.$set(item, "valueKeys", valueKeys);
    },
    handleRemoveValueKey(item, index) {
      item.valueKeys.splice(index, 1);
    },
    changeChartType(valueKey) {
      if (valueKey.t == "pictorialBar") {
        valueKey.t = "bar";
      } else if (valueKey.t == "bar") {
        valueKey.t = "line";
      } else if (valueKey.t == "line") {
        valueKey.t = "pictorialBar";
      }
    },

    clearKeys(data) {
      data.labelKey = "";
      data.valueKeys.forEach((valueKey) => {
        valueKey.k = "";
      });
    },

    // Y轴设置
    handleAddYList() {
      const { yAxis } = this.echarts;
      yAxis.push(this.$deepClone(this.yAxisSetting));
    },
    handleRemoveYList(index) {
      this.echarts.yAxis.splice(index, 1);
    },

    getEchartsType(value) {
      switch (value) {
        case "pictorialBar":
          return "learun-icon-up-base";
        case "bar":
          return "learun-icon-bar";
        case "line":
        default:
          return "learun-icon-line";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/core/styles/variables.scss";
.echarts-type,
.echarts-y {
  width: 28px;
  min-width: 28px;
  height: 28px;
  color: #fff;
  text-align: center;
  background-color: $primary-color;
  cursor: pointer;
  border-radius: 4px 0 0 4px;
}
.echarts-setting {
  width: 28px;
  min-width: 28px;
  height: 28px;
  color: $primary-color;
  text-align: center;
  background-color: #f5f7fa;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  border: 1px solid $border-color-base;
  border-left: 0;
}

.echarts-y {
  border-radius: 0;
  background-color: #f3f3f3;
  color: $text-color;
  border: 1px solid $border-color-base;
  border-left: 0;
}
.delete-btn {
  margin-left: 2px;
  cursor: pointer;
  color: $error-color;
}
</style>
<style lang="scss">
.echarts-select {
  .el-input__inner {
    border-radius: 0 !important;
    border-left: 0;
  }
  .el-input-group__append {
    border-left: 0;
    border-radius: 0 !important;
  }
}
.el-dropdown-menu__item {
  &.active {
    background-color: #ecf5ff;
    color: #66b1ff;
  }
}
</style>

